//推荐使用class定义样式，且请以'组件名'作为前缀(避免与其他组件class产生冲突)
//It is recommended to use class to define the style, and please prefix with 'component name'(Avoid conflicts with other component class)

._CompSwitch-Body{
    display: flex;
    align-items: center;
    gap: var(--Theme-Gap-SM);
}

._CompSwitch-Slot{
    position: relative;
    display: flex;
    height: var(--Theme-Text-LG);
    width: var(--Theme-Text-4XL);
    border-radius: calc(infinity * 1px);
    cursor: pointer;
    outline-offset: 0px;
    outline: 1px solid var(--Theme-Color-Divider);
    transition-property: outline-color,background-color;
    transition-duration: var(--Theme-TransDuration);
    transition-timing-function: ease-in-out;
    background: var(--Theme-Color-Module);
    &[data-checked]{
        outline-color: var(--Theme-Color-Active);
        background: var(--Theme-Color-Active);
    }
}

._CompSwitch-Bar{
    height: var(--Theme-Text-LG);
    width: var(--Theme-Text-LG);
    border-radius: calc(infinity * 1px);
    pointer-events: none;
    display: inline-block;


    //@apply size-[--Theme-Text-LG] rounded-full pointer-events-none inline-block;
    //@apply translate-x-0;
    //@apply group-data-[checked]:bg-[--Theme-Color-Invert];
    @apply rtl:group-data-[checked]:-translate-x-full group-data-[checked]:translate-x-full;
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    transition-property: transform,background-color;
    transition-duration: var(--Theme-TransDuration);
    transition-timing-function: ease-in-out;

    background: var(--Theme-Color-Divider);
    .group[data-checked] & {
        background-color: var(--Theme-Color-Invert);
    }

}

